<template>
	<div class="flex h-screen bg-white overflow-hidden" v-if="isLoad">
		<div class="h-full overflow-auto">
			<YPMENU :openChildMenu="openChildMenu" @toggle_menu="toggle_menu" />
		</div>
		<div class="flex-1 flex flex-col bg-slate-100 min-w-0">
			<div class="h-12 flex items-center p-2 bg-white border-b">
				<div @click="openChildMenu = !openChildMenu">
					<i class="ri-indent-decrease text-gray-500 text-xl hover:text-lan-300" v-if="openChildMenu"></i>
					<i class="ri-indent-increase text-gray-500 text-xl hover:text-lan-300" v-else></i>
				</div>
				<div>
					<BreadCrumb class="hidden lg:block" />
				</div>
				<div class="flex-1 flex justify-end items-center space-x-2 text-sm mr-5">
					<div class="flex items-center space-x-6">
						<yppopover v-model="showPopover" @click="handleClickPopover">
							<template v-slot:reference>
								<i class="ri-notification-2-line size text-lg relative">
									<span
										v-if="messageData.number"
										class="absolute -translate-y-1 -translate-x-1 bg-red-500 text-white text-xs text-center px-1.5 py-0.5 rounded-full w-fit"
										>{{ messageData.number }}</span
									>
								</i>
							</template>
							<template v-slot:popover-content>
								<div class="divide-y">
									<div
										class="flex justify-between items-center px-2 py-1"
										@click="router.push(`/${messageData.mod}/list`)"
									>
										<div>
											{{ messageData.title }}
										</div>
										<div>{{ messageData.number }}</div>
									</div>
								</div>
							</template>
						</yppopover>
						<div class="flex items-center">
							<div>当前用户：</div>
							<div class="font-bold text-blue-500">
								<router-link to="/my">{{ store.state.admin.truename }}</router-link>
							</div>
						</div>
						<div class="flex items-center">
							<div>等级：</div>
							<div>
								{{ store.state.admin.roles[0].title }}
							</div>
						</div>
					</div>
					<div
						class="text-white bg-slate-500 hover:bg-blue-600 cursor-pointer w-7 h-7 rounded-full border flex items-center justify-center"
						@click="clearCache()"
						v-tooltip.bottom="'清理缓存'"
					>
						<i class="ri-brush-2-fill text-xl"></i>
					</div>
					<div
						class="text-white bg-slate-500 hover:bg-blue-600 cursor-pointer w-7 h-7 rounded-full border flex items-center justify-center"
						@click="dropevent('loginOut')"
						v-tooltip.bottom="'安全退出'"
					>
						<i class="ri-login-circle-fill text-xl"></i>
					</div>
				</div>
			</div>
			<div class="flex-1 flex overflow-auto">
				<div class="flex-1 px-3 my-3 flex overflow-auto min-w-[1024px]">
					<router-view :key="key"></router-view>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
	import { getData, postData, alter, confirms } from '@/common/base'
	import store from '@/store'
	import { router } from '@/router'
	import { ref, onMounted, onUnmounted, computed, getCurrentInstance } from 'vue'
	import YPMENU from '@/components/ypmenu'
	import BreadCrumb from '@/components/BreadCrumb'
	const key = router.currentRoute.value.fullPath
	const isLoad = ref(false)
	const showPopover = ref(false)
	const ws = ref(null)
	const messageData = computed(() => store.state.messageInfo)
	const openChildMenu = ref(sessionStorage.getItem('openChildMenu') || false)
	const toggle_menu = (val) => {
		sessionStorage.setItem('openChildMenu', val)

		openChildMenu.value = val
	}

	const clearCache = async () => {
		const resp = await getData('index/clearCache')
		if (resp.code) {
			alter({ type: 'alter-success', text: resp.msg })
		}
	}

	const dropevent = (type) => {
		switch (type) {
			case 'personHome':
				break
			case 'editpass':
				break
			case 'loginOut':
				confirms({ text: '确定要退出吗？' }).then(() => {
					store.commit('LOGIN_OUT')
					alter({ type: 'alter-success', text: '您已成功退出' })
					router.push('/login.html')
				})
				break
		}
	}

	const handleClickPopover = () => {
		if (messageData.value.number > 0) showPopover.value = true
	}
	onMounted(() => {
		isLoad.value = true
		ws.value = new WebSocket('ws://192.168.1.102:8282')
		ws.value.onopen = () => {
			console.log('ws连接成功')
		}
		ws.value.onmessage = async (res) => {
			const { type, client_id, message } = JSON.parse(res.data)
			if (type == 'init') {
				const resq = await postData('socket/bind', {
					client_id
				})
			}
			if (type == 'client_message') {
				// 获取到长连接发送的消息，更新消息接口
				store.dispatch('GET_MESSAGE')
			}
			if (message) {
				console.log('home接受到消息', message)
				store.dispatch('SET_SOCK', message)
			}
		}
		store.dispatch('GET_MESSAGE')
	})
	onUnmounted(() => {
		ws.value.close()
		ws.value = null
	})
</script>
